<template>
  <div class="tagsView">
    <el-tag
      :closable="tag.name !== 'home'"
      size="medium"
      v-for="(tag, index) in tagsList"
      :key="index"
      :disable-transitions="true"
      :effect="$route.path === tag.path ? 'dark' : 'plain'"
      @click="handClick(tag)"
      @close="handleClose(tag, index)">
      {{ tag.meta.title }}
    </el-tag>
  </div>
</template>

<script>
import store from '@/store/index'
export default {
  name: 'tagsView',
  data() {
    return {
      routeName: 'home',
    }
  },
  // mounted() {
  //   console.log(this.$route.matched, 'routers')
  //   store.commit('tabs/SELECT_TAGS', this.$route)
  // },
  watch: {
    $route: {
      immediate: true,
      handler(val) {
        this.routeName = val.name
      },
    },
  },
  computed: {
    tagsList() {
      return store.state.tabs.stateTagList
    },
  },
  methods: {
    handClick(tag) {
      this.$router.push(tag.path)
    },
    handleClose(tag, index) {
      if (this.tagsList.length === 1) {
        return
      }
      store.commit('tabs/CLOSE_TAGS', tag)
      // console.log(this.$route.path)
      // 如果关闭的标签不是当前的路由的话,不做路由跳转
      if (this.$route.path !== tag.path) {
        return
      } else {
        console.log(index, this.tagsList.length, 'tagsList')
        // 如果删除的是第一个
        if (index === 0) {
          this.$router.push(this.tagsList[index].path)
        }
        if (index == this.tagsList.length) {
          //如果关闭的是最后一个标签，那么路由跳转到最后一个
          this.$router.push(this.tagsList[index - 1].path)
        }
        if (index > 0 && index < this.tagsList.length) {
          this.$router.push(this.tagsList[index].path)
        }
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.tagsView {
  display: flex;
  align-items: center;
  padding: 0 15px;
  height: 34px;
  box-shadow: 0 2px 4px 0px rgb(185, 185, 185);
  .el-tag {
    cursor: pointer;
    border-radius: 0;
    margin: 0 3px;
  }
}
</style>
